<template>
	<van-popup v-model="visible" round position="bottom" get-container="#app">
		<van-area
			ref="area"
			:area-list="areaList"
			@confirm="confirm"
			@cancel="cancel"
			:columns-num="columnsNum"
		>
		</van-area>
	</van-popup>
</template>
<script>
import { areaList } from "@/assets/address";
export default {
	props: {
		value: {
			type: Array,
			default: () => []
		},
		columnsNum: {
			type: [Number, String],
			default: 3
		}
	},
	data() {
		return {
			areaList,
			visible: false
		};
	},
	watch: {
		visible(v) {
			if (!v) {
				this.$emit("close", v);
			}
		}
	},
	methods: {
		open() {
			this.visible = true;
			this.$nextTick(() => {
				const { value } = this;
				if (value.length > 0) {
					this.$refs.area.reset(value[value.length - 1].code);
				}
			});
		},
		confirm(v) {
			this.cancel();
			this.$emit("input", v);
			this.$emit("confirm", v);
		},
		cancel() {
			this.visible = false;
		}
	}
};
</script>
